<template>
    <!-- 头部固定区域 -->
    <van-nav-bar class="header" to="/" :fixed="true" z-index="100" title="" left-text="外卖点餐" left-arrow
        @click-left="onClickLeft" />
    <div class="headerA">
        <div>配送至:<span>
                <van-icon name="location-o" />重庆市九龙坡区
                <van-icon name="arrow" />
            </span></div>
        <p>起送价&nbsp;￥25,满80免配送费</p>
    </div>
    <!-- 侧边栏 -->
    <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
    <div class="main" ref="main">
        <div class="left inner-container" ref="leftS">
            <van-sidebar @change="onChange" class="aside left inner-container " v-model="active">
                <van-sidebar-item @click="clickLeft(index)" v-for="(item, index) in Order.left"
                    :class="{ current: index == currentIndex() }" key="index" :title="item.name" />
            </van-sidebar>
        </div>


        <!--右边购物车 -->
        <div class="right inner-container" ref="rightS">
            <div class="right">
                <!-- <van-pull-refresh v-model="loading" success-text="刷新成功" @refresh="onRefresh"> -->
                <Dish class=" rHeight" />
                <!-- </van-pull-refresh> -->
            </div>
        </div>
    </div>
    <!-- </van-list> -->


    <van-submit-bar class="footer" :price="Order.cartAllInfo.Allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox>全选</van-checkbox>
        <van-action-bar-icon :badge="Order.cartAllInfo.allNum" icon="cart-o" @click="onClickIcon" />
    </van-submit-bar>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, computed } from 'vue'
import { Toast } from 'vant';
import { orderDel } from '../api/orderDel';
import { useOrderDel } from '../store/orderDel'
import { useRouter } from 'vue-router';
import Dish from '../views/orderDel/Drink.vue'
import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'
BScroll.use(MouseWheel)
const router = useRouter()
const Order = useOrderDel()


const onClickLeft = () => {
    router.push({
        path: '/'
    })
};

const onChange = (index: number) => {
    console.log(index)
}
const active = ref(0);


const finished = ref(true);
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
}

interface List {
    img: string,
    objectId: string,
    price: string,
    name: string,
    num: string
}
const list = ref(Array<List>);
// orderDel().then(res => {
//     list.value = res.data.results
//     console.log(res.data.results)
// })


const onSubmit = () => {
    router.push({
        path: '/confirmord'
    })
};
const onClickIcon = () => { };

//Better-Scroll
const rightS: any = ref<HTMLElement | null>(null)
const main: any = ref<HTMLElement | null>(null)
const leftS: any = ref<HTMLElement | null>(null)
const allHeight: any = []
const r: any = ref('')
const scrollRight: any = ref('')
//左侧点击右侧滚动
const clickLeft = (index: any) => {
    r.value.scrollTo(0, -allHeight[index], 300)
    console.log(allHeight[index])
}
console.log(r)

//右侧滑动左侧变化
const currentIndex = (function () {
    return allHeight.findIndex((item: number, index: number) => {
        return scrollRight.value >= item && scrollRight.value < allHeight[index + 1]
        // console.log(item, index)
    })

})
// console.log(currentIndex())





nextTick(() => {
    let bs = new BScroll(main.value, {
        scrollY: true,
        click: true,
        mouseWheel: true,
        // probeType: 3,
    })
    let l = new BScroll(leftS.value, {
        scrollY: true,
        click: true,
        probeType: 3,
        mouseWheel: true
    })
    console.log(l)
    r.value = new BScroll(rightS.value, {
        scrollY: true,
        click: true,
        probeType: 3,
        mouseWheel: true
    })
    console.log(r.value)

    //统计右侧滑动距离
    r.value.on('scroll', (pos: any) => {
        scrollRight.value = Math.abs(pos.y)
        // console.log(scrollRight.value)
    })

    //统计右侧每个版块盒子高度
    let Height = 0;
    allHeight.push(Height);
    let lis = document.getElementsByClassName('rHeight')
    console.log(lis)
    Array.from(lis).forEach(v => {
        Height += v.clientHeight
        allHeight.push(Height);
    })
    console.log(allHeight)

    // const currentIndex = allHeight.findIndex((item: any, index: Number) => {
    //     // return scrollRight.value >=item&&scrollRight<allHeight[index+1]
    //     console.log(item, index)
    // })


})






//下拉刷新
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        // Toast('刷新成功');
        loading.value = false;
        count.value++;
        console.log(count.value)
    }, 1000);
};



</script>

<style lang="scss" scoped>
// html {
//     overflow: -moz-hidden-unscrollable;
//     height: 100%;
// }

// body::-webkit-scrollbar {
//     display: none;
// }

// body {
//     -ms-overflow-style: none;
//     height: 100%;
//     width: calc(100vw + 18px);
//     overflow: auto;
// }
// .van-sidebar-item--select {
//     color: rgb(199, 97, 114);
// }

.van-sidebar-item {
    // :root {
    //     // --van-card-background-color: rgb(199, 97, 114);
    //     --van-sidebar-selected-border-width: 0px
    // }
    --van-sidebar-selected-border-width: 0px;
}




.aside {

    // height: calc(100vh - 107px);
    // overflow: scroll;
    // overflow-x: hidden;
    // overflow-y: scroll;
    // -ms-overflow-style: none;

    :deep(.van-sidebar-item) {
        height: 90px;
        display: flex;
        align-items: center;
    }


    // :deep(.van-sidebar-item):hover {
    //     color: aqua;
    // }

    // .van-sidebar-item:hover{
    //     color: aqua;
    // }


}

.inner-container::-webkit-scrollbar {
    display: none;
}

.main {
    display: flex;
    margin-top: 108px;
    width: 100vw;
    height: calc(100vh - 188px);
    overflow: hidden;

    .current {
        color: red;
        background-color: #fff;
        // --van-sidebar-selected-border-width: 5px
    }
}

.left {
    // height: calc(100vh - 188px);
    overflow: hidden;
}

.right {
    // height: calc(100vh - 188px);
    overflow: hidden;
}

.fd {
    display: flex;
    width: 295px;

    .button {
        line-height: 104px;
    }
}

.header {
    color: black;
    font-size: 2rem;
    background-color: #fff;
}

.headerA {
    height: 12rem;
    width: 100%;
    font-size: 2.6rem;
    border-bottom: 1px solid rgb(211, 208, 208);
    border-top: 1px solid rgb(211, 208, 208);
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 100;
    background-color: #fff;

    div {
        margin-left: 8rem;
        margin-top: 1rem;

        span {
            border: 1px solid;
            margin-left: 1rem;
            border-radius: 5px;
            line-height: 20px;
            display: inline-block;
        }
    }

    p {
        margin-left: 8rem;
        color: red;
    }
}

.footer {
    // height: 80px;
    padding: 15px 0;
}
</style>